import {
    StackNavigator,
    addNavigationHelpers,
} from 'react-navigation';
import {
    createStore,
    applyMiddleware,
    combineReducers,
} from 'redux';
import {
    createReactNavigationReduxMiddleware,
    createNavigationReducer,
    createReduxBoundAddListener
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';
import { Platform,View,StatusBar} from 'react-native';
import thunkMidlleware from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react'
import sqliteStore from './utils/sqlitestore';
import Router from './routers/index.js';
import Stores from './store.js';
import Http from './utils/http';
import sqlite,{excute} from './utils/sqlite';
import { getStoreInfo,getAsyncStoreInfo } from './utils/appinfo';
import SplashScreen from 'react-native-splash-screen'
import devToolsEnhancer from 'remote-redux-devtools';
import config from './utils/config';
import utils from './utils';
const http = new Http();;
const LinkUrlFix = Platform.OS == 'android' ? 'fetail://fetail/' : 'fetail://';
const navReducer = createNavigationReducer(Router);


const persistConfig = {
    key: 'root',
    storage:sqliteStore,
    whitelist:["app"]
}
const appReducer = combineReducers({
    ...Stores,
    nav: navReducer,
});
const persistedReducer = persistReducer(persistConfig, appReducer);
const middleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav,
);
const addListener = createReduxBoundAddListener("root");

class App extends React.Component {
    render() {
        return (
            <View style = {{flex:1}}>
                <StatusBar hidden = {true} />
                <Router 
                    screenProps={this.props.app}
                    navigation={{
                        dispatch: this.props.dispatch,
                        state: this.props.nav,
                        addListener,
                    }}
                />
            </View>
        );
    }
    componentDidMount(){
       setTimeout(()=>{
        SplashScreen.hide();
       },2000);
    }
}

const mapStateToProps = (state) => {
    return {
        nav: state.nav
    }
};

const store = createStore(
    persistedReducer,
    devToolsEnhancer({realtime:config.isDebug}),
    applyMiddleware(middleware,thunkMidlleware)
);
const persistor = persistStore(store);
const AppWithNavigationState = connect(mapStateToProps)(App);
React.Component.prototype.$http = http;
React.Component.prototype.$sqlite = sqlite;
React.Component.prototype.$excute = excute;
React.Component.prototype.$getStoreInfo = getStoreInfo;
class Root extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <PersistGate persistor = {persistor} loading = {true} >
                    <AppWithNavigationState uriPrefix={LinkUrlFix} />
                </PersistGate>
            </Provider>
        );
    }
    async componentWillMount(){
        await getAsyncStoreInfo();
    }
}
export default Root;